<template>
    <div>
        <el-row class="wathdra_record">
            <el-col :span="24" class="leave_header_title">
                <div class="leave_title">
                    <div class="leave_left">首页大图
                        &#X3000;
                        <el-button type="primary" size="small" @click="addBannerImg()">新增</el-button>
                        <el-button type="danger" size="small" @click="removeBannerImg()">删除</el-button>
                    </div>
                    <div class="leave_right check_bill_int">
                        <el-input type="text" placeholder="请输入关键字" v-model="filterForm.keyWord" clearable @clear="choose()"></el-input>
                        <el-button type="primary" size="small" @click="choose()">搜索</el-button>
                    </div>
                </div>
            </el-col>
        </el-row>
        <div>
            <el-table
                    :data="bannerOptions"
                    @selection-change="handleSelectionChange"
                    class="table_banner_style">
                <el-table-column
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column>
                    <template slot-scope="scope">
                        <div class="banner_img_box">
                            <div class="image_box">
                                <img :src="scope.row.picture" alt="">
                            </div>
                            <div class="box_img_buttom">
                                <span>{{scope.row.updateTime}}</span>
                                <i class="iconfont icon-xiugai" @click="editBanner(scope.row)"></i>
                            </div>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <div class="right clear">
                <el-pagination
                        @size-change="onSizeChange"
                        @current-change="onFlipOver"
                        :current-page="pagination.currentPage"
                        :page-sizes="pagination.pageSizes"
                        :page-size="pagination.pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="pagination.total">
                </el-pagination>
            </div>
        </div>
        <DialogInput ref="bannerImgDialog" :title="dialogTitle">
            <div class="rem-dialog-con">
                <el-row>
                    <el-form :model="form" label-width="140px" size="small" >
                        <el-form-item label="文章标题：">
                            <el-col :span="24" class="text_left">
                                <el-input type="text" placeholder="请输入文章标题" v-model="form.title" class="bill_int"></el-input>
                            </el-col>
                        </el-form-item>
                        <el-form-item label="上传大图：">
                            <el-col :span="24" class="picture_int text_left">
                                <el-input type="text" placeholder="请输入大图链接" v-model="form.picture"></el-input>
                                <UploaderImages @input="bannerImg" uploadText="上传大图" class="picture_upload"></UploaderImages>
                            </el-col>
                        </el-form-item>
                        <el-form-item label="跳转链接：">
                            <el-col :span="24" class="text_left">
                                <el-input type="text" placeholder="请输入跳转链接" v-model="form.connect" class="bill_int"></el-input>
                            </el-col>
                        </el-form-item>
                        <el-form-item label="置顶顺序：">
                            <el-col :span="24" class="text_left">
                                <el-radio-group v-model="form.topOrder" size="small" @change="changesequence(form.topOrder)">
                                    <el-radio-button v-for="item in sequenceData" :label="item.value" :key="item.value">{{item.label}}</el-radio-button>
                                </el-radio-group>
                                <el-button type="primary" @click="cancelTop()">取消置顶</el-button>
                            </el-col>
                        </el-form-item>
                    </el-form>
                </el-row>
            </div>
            <span slot="Remfooter" class="submit-btn">
                <el-button size="small" type="info" class="hpx-cancel-color dialog-button" @click="closeDialog()">取消</el-button>
                <el-button size="small" type="primary" class="dialog-button" @click="confirmAddBannerImg()" v-if="this.dialogTitle == '新增'">确定</el-button>
                <el-button size="small" type="primary" class="dialog-button" @click="confirmUpdateBannerImg()" v-if="this.dialogTitle == '修改'">修改</el-button>
            </span>
        </DialogInput>
    </div>
</template>

<script lang="ts">
    import { Vue, Component } from 'vue-property-decorator';
    import Pagination from "@/types/Pagination";
    import DialogInput from '@component/common/DialogInput.vue';
    import { sequenceTypes } from '@/util/constantStatus';
    import UploaderImages from '@/component/common/UploaderImages.vue';
    @Component({
        extends: Pagination,
        components: {
            DialogInput,
            UploaderImages
        }
    })
    export default class BannerImg extends Vue {
        form = {
            sequence: '',
            title: '',
            picture: '',
            picture_id: '',
            connect: '',
            topOrder: '',
            isValid: '0'
        }
        filterForm = {
            keyWord: '',
        }
        removeId = [];
        dialogTitle: string = '';
        bannerOptions = []
        sequenceData = sequenceTypes;
        changesequence (sequence) {
            this.form.topOrder = sequence;
        }
        async getBannerImgList () {
            let postData = {
                currentPage: this.pagination.currentPage,
                pageSize: this.pagination.pageSize,
                title: this.filterForm.keyWord
            }
            let res = await this.$http.post('newsBanner/page', postData)
            if (res.status == 200) {
                let { items, totalNum } = res.data;
                this.bannerOptions = items;
                this.pagination.total = totalNum;
            }
        }
        addBannerImg () {
            this.form = {
                sequence: '',
                title: '',
                picture: '',
                picture_id: '',
                connect: '',
                topOrder: '',
                isValid: '0'
            }
            this.dialogTitle = '新增'
            this.$refs['bannerImgDialog'].openDialog();
        }
        editBanner (item) {
            this.getSingleImgDetail(item.id)
            this.dialogTitle = '修改'
            this.$refs['bannerImgDialog'].openDialog();
        }
        removeBannerImg () {
            if (this.removeId.length == 0) {
                this.$alert('请选择想要删除的大图!','提示',{
                    confirmButtonText: '确定',
                    customClass: 'custom-message-box',
                    callback: action => {}
                })
                return;
            }
            this.$confirm('是否删除已选择的图片?','提醒',{
                confirmButtonText: '继续',
                cancelButtonText: '以后再说',
                customClass: 'custom-message-box',
                center: true
            }).then(() => {
                this.confirmRemoveBannerImg()
            }).catch((err) => {
                console.log(err)
            })
        }
        async confirmAddBannerImg () {
            let postData = {
                title: this.form.title,
                picture: this.form.picture,
                connect: this.form.connect,
                topOrder: this.form.topOrder
            }
            let res = await this.$http.post('newsBanner/create', postData)
            if (res.status == 200) {
                this.getBannerImgList();
                this.$refs['bannerImgDialog'].closeDialog();
            }
        }
        async confirmRemoveBannerImg () {
            let postData = this.removeId;
            let res = await this.$http.post('newsBanner/delectNewsBanner', postData)
            if (res.status == 200) {
                this.getBannerImgList();
            }
        }
        async confirmUpdateBannerImg () {
            let postData = {
                id: this.form.id,
                title: this.form.title,
                picture: this.form.picture,
                connect: this.form.connect,
                topOrder: this.form.topOrder,
                isValid: this.form.isValid
            }
            let res = await this.$http.put('newsBanner/updateNewsBanner', postData)
            if (res.status == 200) {
                this.$refs['bannerImgDialog'].closeDialog();
                this.getBannerImgList();
            }
        }
        async getSingleImgDetail (id: string|number) {
            let res = await this.$http.get(`newsBanner/queryNewsBannerById/${id}`)
            if (res.status == 200) {
                this.form = res.data
            }
        }
        // 取消置顶
        cancelTop () {
            this.form.topOrder = '6'
            this.form.isValid = '1'
        }
        bannerImg (valData: any) {
            this.form.picture = valData.path;
            this.form.picture_id = valData.id;
        }
        handleSelectionChange (val) {
            val.forEach((i) => {
                this.removeId.push(i.id)
            })
        }
        closeDialog () {
            this.$refs['bannerImgDialog'].closeDialog();
        }

        choose () {
            this.getBannerImgList()
        }
        loadDataForPagination() {
            this.getBannerImgList()
        }
        mounted () {
            this.getBannerImgList();
        }
    }
</script>

<style lang="scss" scoped>
    .banner_img_box {
        display: inline-block;
        border: 1px solid $__color-border;
        padding: 8px 20px 8px 8px;
        height: 200px;
        width: 240px;
    }
    .box_img_buttom {
        display: flex;
        justify-content: space-between;
    }
    .banner_img_check {
        .el-checkbox {
            margin-top: 8px;
        }
    }

    .image_box {
        width: 200px;
        height: 150px;
        img {
            width: 200px;
            max-height: 150px;
        }
    }
</style>
<style lang="scss">
    .banner_img_check {
        .el-checkbox__input {
            position: absolute;
            white-space: normal;
            right: 4px;
            top: 4px;
            .el-checkbox__label {
                border: 1px solid #f00;
            }
        }
        .el-checkbox + .el-checkbox {
            margin-left: 0;
        }
    }
    .picture_int {
        position: relative;
        .el-input {
            width: 220px;
        }
    }
    .table_banner_style {
        width: 1330px;
        .el-table__body {
            width: 1330px !important;
        }
        .el-table__body-wrapper {
            overflow: auto;
        }
        .el-table__header-wrapper {
            overflow: auto;
        }
        tbody {
            width: 1330px;
            float: left;
            .el-table__row {
                display: inline-block;
                position: relative;
                td:nth-child(1) {
                    position: absolute;
                    right: 2px;
                    top: 2px;
                }
            }
        }
        th.is-leaf, td {
            border: none;
        }
    }
    .picture_upload {
        display: inline-block;
        .el-button--primary {
            width: 90px;
        }
        position: absolute;
        right: 60px;
        top: -10px;
    }
</style>